<template>
    <table class="dataTable table table-bordered table-hover table-responsive">
        <tr v-for="config in columnsSetConfig">
            <template v-for="set in config">
                <td :class="{'uploadWidth':set.upload || set.checkboxOptions}"
                    v-if="set.edit || set.options || set.datetime || set.textarea || set.upload || set.checkboxOptions || set.img || set.empty"
                    style="width: 19%">
                    <span class="required" v-if="set.required || required(item.valdate,set.data)">*</span>
                    <span class="required" v-else>&nbsp;</span> {{ set.title }}
                </td>
                <td v-if="set.edit || set.options || set.datetime || set.textarea || set.upload || set.checkboxOptions || set.img || set.empty"
                    style="width: 31%">
                    <input :disabled="set.readonly" v-if="set.edit" type="text" class="form-control"
                           v-model="item[set.data]" name="{{set.data}}">
                    <select class="form-control" v-if="set.options" v-model="item[set.data]" name="{{set.data}}"
                            :disabled="set.readonly">
                        <option v-for="option in set.options" :value.sync="option.value">
                            {{option.key.substr(0, 17) + (option.key.length > 17 ? "..." : "")}}
                        </option>
                    </select>
                    <textarea :readonly="set.readonly" v-if="set.textarea" type="text" class="form-control"
                              v-model="item[set.data]" name="{{set.data}}"
                              style="resize:none;min-height:100px"></textarea>
                    <div class="form_datetime" v-if="set.datetime">
                        <input :readonly="set.readonly" type="text" class="form-control"
                               v-model="item[set.data] | updatetime" name="{{set.data}}" @click="show($event,showTime)"
                               v-el:datetime>
                        <span class="add-on"><i class="icon-th"></i></span>
                    </div>
                    <!-- <from-file v-if="set.upload" :name="set.data" :edit="true"></from-file> -->
                    <img v-if="set.img" :src="item[set.data]" class="table-picture" style="max-width: 50%"/>
                    <file-upload v-if="set.upload" :inputname="set.data" :file-size="fileSize" v-ref:file
                                 styles="width:auto"></file-upload>
                    <!-- <html-edit v-if="set.htmlEdit" :disabled="set.readonly" v-ref:note :content.sync="htmlContent" height="100" width="100%"></html-edit> -->
                    <div class="checkbox-item" v-if="set.checkboxOptions">
                        <label v-for="option in set.checkboxOptions" style="margin-right:5px">
                            <input type="checkbox" :disabled="set.readonly" name="{{set.data}}" :value="option.value"
                                   v-model="item[set.data]"/>{{option.key}}
                        </label>
                    </div>
                </td>
            </template>
        </tr>
    </table>
</template>

<style scoped>
    /*
      .form-inline .btn+.btn {
         margin-right:10px;
      }
      */
    /*table.table-bordered.dataTable tbody td{*/
    /*border: 0 ;*/
    /*}*/
    /*table.table-bordered.dataTable tbody tr{*/
    /*border: 1px solid #ddd;*/
    /*}*/
    /*table.table-bordered.dataTable tbody .form-control{*/
    /*width:60%;*/
    /*}*/
    /*.uploadWidth {*/
    /*width: 30.7%*/
    /*}*/
    /*.form-inline .form-group + .form-group {*/
    /*margin-left: 20px;*/
    /*}*/
</style>

<script>
    export default {
        data: () => ({
            showTime: true
        }),
        props: {
            item: {
                type: Object,
                default: () => ({})
            },
            columnsSet: {
                type: Array,
                default: () => []
            },
            fileSize: {
                default: 5
            },
            columnsNum: {
                type: Number,
                default: 2
            },
            checkboxValue: {type: Array, default: () => []},
            htmlContent: {
                type: String,
                default: ""
            },
            readonly: {type: Boolean, default: false},
        },
        computed: {
            /*根据columsNum对修改页面进行排版，为2时一行两个输入框，筛选数据之后进行重组进行显示*/
            columnsSetConfig () {
                let list = [];
                let setList = [];
                let i = 0;
                let config = this.columnsSet.filter(data => data.edit || data.options || data.datetime || data.textarea || data.upload || data.checkboxOptions || data.img);
                config.forEach(data => {
                    if ((i + 1) % this.columnsNum === 0) {
                        setList.push(data);
                        list.push(setList);
                        setList = [];
                        i++
                    } else {
                        setList.push(data);
                        if (config.length === (i + 1)) {
                            setList.push({empty: true})
                            list.push(setList) // 最后一个数组i的值为单数，则不会push进list数组里导致不显示
                        }
                        i++
                    }
                });
                return list
            }
        },
        methods: {
            required (value, data) {
                if (value && value.rules) {
                    if (value.rules[data]) {
                        return value.rules[data]["required"] || false;
                    } else {
                        return false
                    }
                }
            },
            show (e) {
                if (this.showTime) {
                    $(e.path[0]).datetimepicker('show');
                } else {
                    if (!$(e.path[0]).is(':focus')) {
                        $(e.path[0]).datetimepicker('hide');
                    }
                }
                    this.showTime = !this.showTime
            }
        },
        filters: {
            updatetime: {
                write (v) {
                    $(this.$els.datetime).valid()
                    return v
                },
                read (v) {
                    let n = v + "";
                    if (n.length == 8 || n.length == 14) {
                        let year = n.substr(0, 4);
                        let month = n.substr(4, 2);
                        let day = n.substr(6, 2);
                        let hour = n.substr(8, 2);
                        let minute = n.substr(10, 2);
                        let second = n.substr(12, 2);
                        if (n.length == 14) {
                            return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second
                        } else {
                            return year + "-" + month + "-" + day
                        }
                    } else {
                        return v
                    }

                }
            }
        }
    }
</script>